<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card-body">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="sua-telephone" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="sua-idcard" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否认证</label>
                    </div>
                    <div class="layui-inline" style="margin-left: -120px;">
                        <div class="layui-input-block">
                            <select name="approveState" id="sua-approveState">
                                <option value="">全部</option>
                                <option value="0">未认证</option>
                                <option value="1">已认证</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="socialuser-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="socialuserapprovetbl" lay-filter="socialuserapprovetbl-filter"></table>
    <script type="text/html" id="socialapprove-bar">
        <a class="layui-btn layui-btn-xs" lay-event="socialapprove-sure">认证</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="socialapprove-del">取消</a>
    </script>
</div>

<script src="/aaa/layuiadmin/layui/layui.js"></script>
<script th:inline="none">
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.$;

        /*发送请求获取社会用户表格信息*/
        table.render({
            elem: '#socialuserapprovetbl'
            ,height: 312
            ,url: '/aaa/socialuserapprove/getAllSocialUserWhichApprove' //数据接口
            ,page: true //开启分页
            ,cols: [
                [
                    {field: 'name', title: '姓名',align:'center'}
                    ,{field: 'telephone', title: '手机号', align:'center'}
                    ,{field: 'idcard', title: '身份证号',align:'center'}
                    ,{field: 'forwardImgurl', title: '身份证前照',align:'center',templet: function(d){
                        return '<img src="'+d.forwardImgurl+'" />'
                    }}
                    ,{field: 'backImgurl', title: '身份证后照',align:'center' ,templet: function(d){
                        return '<img src="'+d.backImgurl+'" />'
                    }
            },{field:'approveId', title: '是否认证', width: 200, sort:true,templet: function(d){
                        if(d.approveState==1){
                            return '<span style="color:forestgreen">已认证</span>'
                        }else {
                            return '<span style="color:red">未认证</span>'
                        }
                    }},
                    {field: 'ename', title: '认证人',align:'center'}
            ,{field:'yyy', title: '操作', width: 200, toolbar: '#socialapprove-bar', align:'center'}

                ]
            ],
            //显示大图-----------------------------------------------------------------------------------------------
            done:function(res,curr,count){
                hoverOpenImg();//显示大图
                $('table tr').on('click',function(){
                    $('table tr').css('background','');
                    $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }
        });

        $('#socialuser-searchbtn').click(function () {
            table.reload('socialuserapprovetbl', {
                url: '/aaa/socialuserapprove/getAllSocialUserWhichApprove',
                where: {
                    telephone:$("#sua-telephone").val(),
                    idcard:$("#sua-idcard").val(),
                    approveState:$("#sua-approveState").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });

        //显示大图-----------------------------------------------------------------------------------------------
        function hoverOpenImg(){
            var img_show = null; // tips提示
            $('td img').hover(function(){
                var kd=$(this).width();
                kd1=kd*3;          //图片放大倍数
                kd2=kd*3+30;       //图片放大倍数
                var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
                img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: [kd2+'px']
                });
            },function(){
                layer.close(img_show);
            });
            $('td img').attr('style','max-width:70px;display:block!important');
        }

         /*点击认证按钮发送请求改变状态信息等*/
        table.on('tool(socialuserapprovetbl-filter)', function(obj){
            var data = obj.data;
            if(obj.event === 'socialapprove-sure'){
                if(!data.employeeid){
                    layer.confirm('确定认证么？', function(index){
                        $.post({
                            url:'/aaa/socialuserapprove/socialapprovePass',
                            data:{
                                telephone:data.telephone
                            },
                        },function (data) {
                            if(data.code>0){
                                layer.msg('认证通过');
                            }else{
                                layer.msg('认证失败,请重试');
                            }
                            layer.close(index);
                            table.reload('socialuserapprovetbl');

                        })
                    });
                }else{
                    layer.msg('该消息已认证通过,不能再次认证');
                }
            } else if(obj.event === 'socialapprove-del'){
                    if(!data.employeeid){
                        layer.confirm('确定取消认证么？', function(index){
                            $.post({
                                url:'/aaa/socialuserapprove/delSocialapprove',
                                data:{
                                    telephone:data.telephone
                                },
                            },function (data) {
                                if(data.code>0){
                                    layer.msg('取消成功');
                                }else{
                                    layer.msg('取消失败,请重试');
                                }
                                layer.close(index);
                                table.reload('socialuserapprovetbl');

                            })
                        });
                    }else{
                        layer.msg('该消息已认证通过,不能被删除');
                    }

            };
        });
    });



</script>



</body>
</html>
